<template>
  <el-dialog v-model="visible" title="新增" width="470" @close="close">
    <el-form
      ref="formRef"
      :model="form"
      label-align="right"
      label-width="85"
      size="default"
      label-position="top"
    >
      <el-form-item label="目标部门" v-if="handleType == 2">
        <SelectDepartment
          class="w-full"
          v-model="form.user_or_depart"
          placeholder="请选择"
        ></SelectDepartment>
      </el-form-item>
      <el-form-item label="目标人员" v-if="handleType == 1">
        <SelectPersonnel
          class="w-full"
          v-model="form.user_or_depart"
          placeholder="请选择"
          @change="changeUser($event, form)"
        ></SelectPersonnel>
      </el-form-item>
      <el-form-item label="目标分类" v-if="handleType == 3">
        <SelectCategory
          class="w-full"
          v-model="form.last_category"
          :defaultProps="defaultProps"
          :showAllLevels="true"
        ></SelectCategory>
      </el-form-item>
      <el-form-item label="平台站点" v-if="handleType == 3">
        <SelectPlatformSite
          class="w-full flex"
          v-model:platform="form.platform_id"
          v-model:site="form.site_id"
          valueSizeKey="site_id"
          @changePlatform="changePlatform($event, form)"
          @changeSiteInfo="changeSite($event, form)"
        ></SelectPlatformSite>
      </el-form-item>

      <el-form-item label="目标值">
        <el-input
          class="w-full"
          v-model="form.target_value"
          placeholder="请输入目标值"
          type="text"
        />
      </el-form-item>
      <el-form-item label="目标负责人">
        <select-personnel
          class="w-full"
          v-model="form.target_manage"
          placeholder="请选择"
        ></select-personnel>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="batchClose">取 消</el-button>
      <el-button type="primary" @click="handleSave()">保 存</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { reactive, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import SelectDepartment from "@/components/SelectDepartment/index.vue";
import SelectCategory from "@/components/SelectCategory/index.vue";
import SelectPersonnel from "@/components/SelectPersonnel/index.vue";
import { deepClone, getNowMonthDay } from "@/utils/index.js";
import SelectPlatformSite from "@/components/SelectPlatformSite";

const defaultProps = {
  children: "son",
  label: "name",
  value: "id",
  checkStrictly: true,
};

const emits = defineEmits(["create"]);

const data = reactive({
  form: {},
  visible: false,
  loading: false,
  formRef: null,
  rules: {},
  handleType: "",
  visibleBatch: false,
  batchForm: {},
  batch_type: "",
  title: "",
  load: false,
  currentPage: 1, // 当前页码
  pageSize: 10, // 每页显示的数量
  visibleCreate: false,
});

const { form, visible, formRef, handleType, load } = toRefs(data);

const open = async (type) => {
  console.log(type);
  if (!load.value) {
    load.value = true;
    await 1;
  }
  handleType.value = type;
  visible.value = true;
};

const handleSave = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (valid) {
      const formData = Object.assign({}, form.value);
      console.log(formData);

      if (handleType.value == 1 || handleType.value == 2) {
        if (!formData.user_or_depart) {
          ElMessage.error("请选择目标人员或部门");
          return;
        }
      }

      if (handleType.value == 3) {
        if (!formData.last_category) {
          ElMessage.error("请选择目标分类");
          return;
        }
        if (!formData.platform_id || !formData.site_id) {
          ElMessage.error("请选择平台/站点");
          return;
        }
      }

      if (!formData.target_manage) {
        ElMessage.error("请选择目标负责人");
        return;
      }
      if (!formData.target_value) {
        ElMessage.error("请选择目标负责人");
        return;
      }
      emits("create", formData);
      close();
    }
  });
};

// 初始化
const getForm = () => {
  return {};
};

const close = () => {
  form.value = getForm();
  visible.value = false;
};

defineExpose({ open });

const changeUser = (val, row) => {
  row.target_manage = val;
};

const changePlatform = (val, row) => {
  row.platform_id_text = val;
};

const changeSite = (val, row) => {
  row.site_code = val.site_code;
};
</script>
<style lang="scss">
.label-color {
  .el-radio__input {
    display: none !important;
  }
}

.m-0 {
  margin: 0 !important;
}
</style>
